<template>
	<char-base :options="chartOptions" class="chartline"></char-base>
</template>

<script>
	import charBase from './chart-base'
	import { getChartData } from './chart-utils'
	import { getColorList,getXAxis,getSeriesStyle,getChartGrid } from './chart-config'
	export default {
		name: 'chart-com',
		components: {
			charBase
		},
		props:['componentParams',"dyResultData","chartOrigins"],
		data() {
			return {
				chartOptions:{},
				chartConfig:{
					columns:["AREA_CODE","TYPE_NAME"],
					rows:["CLASS1_NAME"],   // 表示x轴列
					filters:[],
					values:["COUNT_NUM"]
				},
				chartOrigin:{
					"columnList": [{
						"index": 0,
						"aggType": "pie",   // 图表列型  line,linearea,pie,bar,map
						"name": "AREA_CODE"
					}, {
						"index": 1,
						"aggType": "bar",   // 图表列型  line,linearea,pie,bar,map
						"name": "TYPE_NAME"
					}, {
						"index": 2,
						"aggType": "row",
						"name": "CLASS1_NAME"
					}, {
						"index": 3,
						"aggType": "sum",
						"name": "COUNT_NUM"
					}],
					"data": [
						["310116", "污染种类统计", "大气污染", "335.0"],
						["310116", "污染种类统计", "其他", "350.0"],
						["310116", "污染种类统计", "噪音污染", "235.0"],
						["310116", "污染种类统计", "固体污染", "135.0"],
						["310116", "污染种类统计", "水污染", "300.0"]
					]
				}
			}
		},
		watch:{
			"dynamicDataResult": {
				handler() {
					this.setChartOptions(this.dynamicDataResult.data)
				},
				deep: true
			}
		},
		created(){
            if (this.chartOrigins) {
                this.setChartOptions(this.chartOrigins)
            }else{
                this.setChartOptions(this.chartOrigin)
            }
		},
		methods:{
			setChartOptions() {
				let colorList = getColorList()
				let legendData = [];
				let tempSeries = [];
				let renderData = getChartData(this.chartConfig,this.chartOrigin)
				renderData.list.forEach((item,index)=>{
					legendData.push(item.name)
					tempSeries.push(getSeriesStyle(item.type ? item.type : "bar",item,index))
				})
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: '#64a5e5',
							}
						},
						textStyle: {
							fontSize: 24,
						},
					},
					legend: {
						show: true,
						x: 'center',
						y: '10',
						icon: 'stack',
						itemWidth: 10,
						itemHeight: 10,
						textStyle: {
							color: '#fff',
							fontSize: 24,
						},
						data: legendData
					},
					grid: getChartGrid(),
					xAxis: [
						{
							name: '',
							nameTextStyle: {
								color: "#fff",
								fontSize: 24
							},
							type: 'category',
							axisLine: {
								lineStyle: {
									color: '#64a5e5',
									width: this.lineWidth,
									type: "solid"
								}
							},
							axisLabel: {
								show: true,
								textStyle: {
									color: "#758897",
									fontSize: 24
								}, 
								rotate:40  
							},
							splitLine: {
								show:true,
								lineStyle: {
									color: '#346690'
								}
							},
			
							data: renderData.columns
						}
					],
					yAxis: [{
						nameTextStyle: {
							color: "#00c7ff",
							fontSize: 20
						},
						type: 'value',
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#00c7ff',
								width: this.lineWidth,
								type: "solid"
							}
						},
						axisLabel: {
							margin: 10,
							textStyle: {
								color: "#758897",
								fontSize: 24
							}
						},
						splitLine: {
							lineStyle: {
								color: '#346690'
							}
						}
					}],
					series: tempSeries
				};
				this.chartOptions = option
			},
			
		}
	}
</script>
<style lang="less" scoped="scoped">
	.chartline {
        width: 880px;
		height: 440px;
	}
</style>
